<template>
  <div class="home">
    <div class="title">
      <div class="t_l">
        <p class="t_l_t">应用列表</p>
        <p class="t_l_c">
          农域通轻量级应用搭建平台，利用表单引擎、流程引擎、地理组件、数据组件等功能快速、灵活地创造属于你的定制化管理系
          统，实现多元业务场景数字化管理
        </p>
        <div class="t_l_btn" @click="addApp">
          <el-image
            :src="createpng"
            style="width: 16px; height: 16px"
          />添加应用
        </div>
      </div>
      <el-image :src="Group13" class="bg_img" />
    </div>
    <ul class="list">
      <template v-for="(item, index) in list">
        <div
          :key="item.id"
          class="fx-app-item"
          @click="intoModule(item, index)"
        >
          <el-button
            @click.stop="pushApp(item)"
            class="p_btn"
            type="text"
            v-if="item.launchStatus == 0"
          >
            <el-image :src="push" />
          </el-button>
          <span v-if="item.launchStatus != 0" class="push_text">使用中</span>
          <div class="fx-app-item_content">
            <div class="l_icon" :style="{ background: item.bgcolor }" style="overflow:hidden;">
              <el-image :src="item.appIcon" style="width: 25px; height: 25px;filter: drop-shadow(#ffffff 80px 0);transform: translateX(-80px)" />
            </div>
            <div class="list_c">
              <p class="l_c_t">{{ item.appName }}</p>
              <p class="l_c_desc">{{ item.introduction }}</p>
            </div>
          </div>
          <div class="list_btns">
            <div class="btn btn-l" @click.stop="editApp(item)">修改</div>
            <div class="btn" @click.stop="delApp(item)">删除</div>
          </div>
        </div>
      </template>
    </ul>

    <div class="page">
      <el-pagination
        @size-change="stdappAppList"
        @current-change="stdappAppList"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="添加应用"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="应用名称" prop="appName">
          <el-input
            v-model="form.appName"
            placeholder="请输入应用名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="应用描述" prop="introduction">
          <el-input
            v-model="form.introduction"
            type="textarea"
            placeholder="请输入应用描述"
            maxlength="50"
            show-word-limit
            rows='4'
          ></el-input>
        </el-form-item>

        <el-form-item label="应用图标" prop="appIcon">
          <el-upload
            class="upload-demo"
            ref="upload"
            :limit="1"
            accept=".svg"
            action="#"
            :on-change="changeUpload"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-image
              :src="form.appIcon"
              v-if="form.appIcon"
              style="width: 100px; height: 100px"
            />
            <el-button type="primary" v-else>上传图标</el-button>
          </el-upload>
        </el-form-item>
         <el-form-item label="应用排序" prop="seqNo">
          <el-input-number v-model="form.seqNo" :min="1" placeholder="请输入模块排序"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { api } from "../server/api";
import { getFile } from "../untils/uploadImg";
import baseUrl from "../server/env";
import { randomRgb } from "../untils";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        appName: "",
        appIcon: "",
        introduction: "",
         seqNo: 1,
      },
      showurl: baseUrl.showurl,
      total: 10,
      currentPage: 1,
      pageSize: 10,
      createpng: require("../assets/img/create.png"),
      push: require("../assets/img/push.png"),
      Group13: require("../assets/img/Group13.png"),
      list: [
        {
          id: 0,
          appName: "示例应用",
          appIcon:
            "https://img2.baidu.com/it/u=2847217100,1903736697&fm=253&fmt=auto&app=138&f=JPG?w=658&h=486",
        },
      ],
      rules: {
        appName: [
          { required: true, message: "应用名称不能为空", trigger: "blur" },
        ],
         seqNo: [{ required: true, message: "请输入应用排序", trigger: "blur" }],
        appIcon: [
          { required: true, message: "应用图标不能为空", trigger: "blur" },
        ],
        introduction: [
          { required: true, message: "应用描述不能为空", trigger: "blur" },
        ],
      },
      upload: {
        // 设置上传的请求头部this.token
        // headers: { authorization: "" + this.token },
        // 上传的地址
        url: "#",
      },
    };
  },
  mounted() {
    this.stdappAppList();
  },
  methods: {
    stdappAppList() {
      const par = {
        curPage: this.currentPage,
        pageSize: this.pageSize,
        launchStatus: "",
      };
      api.stdappAppList(par).then((res) => {
        const { itemLst, recordCount } = res;
        this.total = recordCount;
        itemLst.map((item) => {
          return (item.bgcolor = randomRgb());
        });
        this.list = itemLst;
      });
    },
    addApp() {
      this.form = {
        appName: "",
        appIcon: "",
        introduction: "",
      };
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$refs.form.resetFields();
      this.$refs.form.resetFields();
      done();
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
      console.log(response, file);
    },

    changeUpload(file) {
      console.log(file);
      let fileName = "";
      const nameData = file.name.split(".");
      if (Array.isArray(nameData)) {
        fileName = nameData[nameData.length - 1];
      }

      getFile(file.raw, (callback) => {
        console.log(callback);
        const par = {
          name: fileName,
          data: callback,
        };
        api.uploadImg(par).then((res) => {
          this.$set(this.form, "appIcon", `${this.showurl + res}`);
          console.log(this.form);
          this.$refs.upload.clearFiles();
        });
      });

      //
    },

    deletAppitem(data) {
      const { appId } = data;

      api.stdappAppDel({ appId }).then((res) => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.stdappAppList();
      });
    },

    pushAppItem(data) {
      const { appId } = data;

      api.stdappAppLaunch({ appId }).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功!",
        });
        this.stdappAppList();
      });
    },
    pushApp(data) {
      this.$confirm("确定要发布该应用?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.pushAppItem(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发布",
          });
        });
    },
    delApp(data) {
      this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletAppitem(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    intoModule(item) {
      this.$router.push({
        name: "modular",
        query: {
          id: item.appId,
          name: item.appName,
          desc: item.introduction,
          icon: item.appIcon,
        },
      });
    },
    editApp(data) {
      this.dialogVisible = true;
      const { appId } = data;
      api.stdappAppDetail({ appId }).then((res) => {
        console.log(res);
        this.form = res;
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.appId != undefined) {
            api.stdappAppUpd(this.form).then((response) => {
              this.$message.success("修改成功");
              this.dialogVisible = false;
              this.stdappAppList();
            });
          } else {
            api.stdapp(this.form).then((response) => {
              this.$message.success("新增成功");
              this.dialogVisible = false;
              this.stdappAppList();
            });
          }
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
// @media screen and (max-width: 1020px) {
//   .h-content {
//     width: 748px;
//   }
// }

// @media screen and (max-width: 1230px) {
//   .h-content {
//     width: 958px;
//   }
// }

// @media screen and (max-width: 1440px) {
//   .h-content {
//     width: 1168px;
//   }
// }

// @media screen and (min-width: 1651px) {
//   .h-content {
//     width: 1588px;
//   }
// }

.home {
  .d-logo-wrapper {
    display: flex;
    align-items: center;
    padding: 0 20px;
    cursor: pointer;
  }
}
.title {
  width: 100%;
  height: 212px;
  padding: 30px 194px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  p {
    padding: 0;
    margin: 0;
  }
  .t_l {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
  }
  .t_l_t {
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    line-height: 28px;
  }
  .t_l_c {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 22px;
    width: 784px;
  }
  .t_l_btn {
    border-radius: 5px;
    background-color: rgba(67, 201, 168, 1);
    border-color: rgba(67, 201, 168, 1);
    width: 111px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    cursor: pointer;
    .el-image {
      vertical-align: middle;
      margin: 2px 13px 0 0;
    }
  }
  .bg_img {
    width: 196px;
    height: 131px;
    min-width: 196px;
    min-height: 131px;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0px;
  box-sizing: border-box;
  height: calc(100vh - 322px);
  margin-left: 163px;
  overflow: auto;
  align-content: flex-start;
  .fx-app-item {
    width: 379px;
    height: 184px;
    min-width: 378px;
    box-sizing: border-box;
    padding: 24px;
    min-height: 184px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 2px;
    margin: 10px;
    position: relative;
    cursor: pointer;
    .p_btn {
      padding: 0px;
      position: absolute;
      top: 21px;
      right: 29px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      // background-color: #d43030;
    }
    .push_text {
      position: absolute;
      top: 30px;
      right: 20px;
      color: rgba(255, 191, 0, 1);
      font-size: 12px;
    }
    .fx-app-item_content {
      display: flex;
      justify-content: flex-start;
      .l_icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .list_c {
        padding-left: 15px;
        .l_c_t {
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          line-height: 24px;
          padding: 0px;
          margin: 0px;
          font-weight: bold;
        }
        .l_c_desc {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
          line-height: 22px;
          height: 44px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    .list_btns {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 48px;
      background-color: rgba(246, 246, 246, 1);
      border-top: 1px solid rgba(233, 233, 233, 1);
      display: flex;
      .btn {
        width: 50%;
        text-align: center;
        line-height: 48px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
      .btn-l {
        color: rgba(67, 201, 168, 1);
        width: 50%;
        font-size: 14px;
        border-right: 1px solid rgba(233, 233, 233, 1);
        box-sizing: border-box;
      }
    }
  }
  .fx-app-item:hover{
    border: 2px solid rgba(67, 201, 168, 1);
  }
}
.page {
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
}
</style>
